<!-- 拖拽表格 -->
<template>
  <base-table :data="data">
    <slot></slot>
  </base-table>
</template>

<script setup>
import { onMounted, defineProps, reactive, watch } from "@vue/runtime-core"
import BaseTable from "../BaseTable/index.vue"
import Sortable from "sortablejs"
const rowDrop = () => {
    const tbody = document.querySelector(".el-table__body-wrapper tbody")
    Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
            const currRow = tableData.splice(oldIndex, 1)[0]
            tableData.splice(newIndex, 0, currRow)
        },
    })
}
onMounted(() => {
    rowDrop()
})
const props = defineProps({
    data: {
        type: Array,
        default: () => {
            return []
        },
    },
})
const tableData = reactive(props.data)
const emit = defineEmits(["update:data"])
watch(
    () => tableData,
    () => {
        emit("update:data", tableData)
    }
)
</script>

<style lang="scss" scoped></style>
>
